<template>
	<div class="base" :style="{ 'background-color': showData.bgColor }">
		<div class="title">
			<div
				class="diy-title"
				:style="{
					'font-size': `${showData.titleSize}px`,
					color: `${showData.titleColor}`,
					'font-weight': `${showData.titleWeight == '1' ? 'bold' : ''}`,
				}"
			>
				<p>{{ showData.title }}</p>
			</div>
			<div class="more-btn">
				<span
					v-if="showData.moreBtn && showData.moreBtnStyle != '3'"
					:style="{ color: `${showData.moreBtnStyle == '1' ? '#409EFF' : ''}` }"
					class="more-btn-text"
				>
					{{ showData.moreBtnText }}
				</span>
				<el-icon v-if="showData.moreBtnStyle != '1'"><ele-ArrowRight /></el-icon>
			</div>
		</div>

		<div
			class="diy-desc"
			:style="{
				'font-size': `${showData.descSize}px`,
				color: `${showData.descColor}`,
				'font-weight': `${showData.descWeight == '1' ? 'bold' : ''}`,
			}"
		>
			<p>{{ showData.desc }}</p>
		</div>
		<el-divider v-if="showData.bottomLine" />
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	props: {
		showData: {
			type: Object as any,
			defult: {},
		},
	},
	setup() {
		return {};
	},
});
</script>

<style scoped lang="scss">
.el-divider--horizontal {
	margin: 0% !important;
}

.base {
	padding: 10px;
}

.title {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;

	.more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.more-btn-text {
		font-size: 12px;
	}
}
</style>
